<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="城市服务商" style="margin-right: 10px">
              <serveSelect @selectClick="selectClick" :value="queryParam.agencyCode"></serveSelect>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="技师编号">
              <a-input placeholder="技师编号" v-model="queryParam.coachId"></a-input>
            </a-form-item>
          </a-col>

          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="付款状态" style="margin-right: 10px">
              <a-select
                v-model="queryParam.payStatus"
                style="width: 120px"
                :options="options"
                allowClear
                placeholder="请选择"
                @change="searchQuery"
              />
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="下单开始时间" style="margin-right: 10px">
              <a-date-picker v-model="queryParam.startTime" :valueFormat="'YYYY-MM-DD'" @change="startChange" />
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="下单结束时间" style="margin-right: 10px">
              <a-date-picker
                v-model="queryParam.endTime"
                :valueFormat="'YYYY-MM-DD'"
                @change="endChange"
                :disabled-date="disabledDate"
              />
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="订单号">
              <a-input placeholder="请输入订单号" v-model="queryParam.orderNo"></a-input>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <!-- 操作按钮区域 -->
    <div class="table-operator">
      <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
      <a-button type="primary" icon="download" @click="handleExportXls('物料订单表')">导出</a-button>
      <a-upload
        name="file"
        :showUploadList="false"
        :multiple="false"
        :headers="tokenHeader"
        :action="importExcelUrl"
        @change="handleImportExcel"
      >
        <a-button type="primary" icon="import">导入</a-button>
      </a-upload>
      <a-dropdown v-if="selectedRowKeys.length > 0">
        <a-menu slot="overlay">
          <a-menu-item key="1" @click="batchDel">
            <a-icon type="delete" />
            删除
          </a-menu-item>
        </a-menu>
        <a-button style="margin-left: 8px">
          批量操作
          <a-icon type="down" />
        </a-button>
      </a-dropdown>
    </div>

    <!-- table区域-begin -->
    <div>
      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px">
        <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择
        <a style="font-weight: 600">{{ selectedRowKeys.length }}</a
        >项
        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
      </div>

      <a-table
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        class="j-table-force-nowrap"
        :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
        @change="handleTableChange"
      >
        <span slot="action" slot-scope="text, record">
          <a @click="handleAudit(record)" v-if="record.payStatus == 3" v-has="'xhdjMateriel:action'">审核</a>
          <a-divider type="vertical" v-if="record.payStatus == 3" v-has="'xhdjMateriel:action'" />

          <a
            @click="handleExpressage(record)"
            v-if="record.orderStatus === 0 && record.getType != 0 && record.payStatus == 1"
            v-has="'xhdjMateriel:expressage'"
            >发货</a
          >
          <a-divider
            type="vertical"
            v-if="record.orderStatus === 0 && record.getType != 0 && record.payStatus == 1"
            v-has="'xhdjMateriel:expressage'"
          />

          <a @click="handleDetails(record)" v-has="'xhdjMateriel:details'">详情</a>
          <a-divider type="vertical" v-has="'xhdjMateriel:details'" />

          <a @click="handleEdit(record)">编辑</a>
          <a-divider type="vertical" />
          <a-dropdown>
            <a class="ant-dropdown-link">更多 <a-icon type="down" /></a>
            <a-menu slot="overlay">
              <a-menu-item>
                <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
                  <a>删除</a>
                </a-popconfirm>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </span>
      </a-table>
    </div>
    <!-- table区域-end -->

    <!-- 表单区域 -->
    <xhdjMaterielOrder-modal ref="modalForm" @ok="modalFormOk"></xhdjMaterielOrder-modal>
    <XhdjMaterielOrderAudit ref="modalAudit" @ok="modalFormOk"></XhdjMaterielOrderAudit>
    <XhdjMaterielOrderDetails ref="modalDetails" @ok="modalFormOk"></XhdjMaterielOrderDetails>
    <XhdjMaterielOrderExpressage ref="modalExpressage" @ok="modalFormOk"></XhdjMaterielOrderExpressage>
  </a-card>
</template>

<script>
import '@/assets/less/TableExpand.less'
import XhdjMaterielOrderModal from './modules/XhdjMaterielOrderModal'
import XhdjMaterielOrderAudit from './modules/xhdjMaterielAudit.vue'
import XhdjMaterielOrderExpressage from './modules/xhdjMaterielExpressage.vue'
import XhdjMaterielOrderDetails from './modules/xhdjMaterielDetails.vue'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import serveSelect from '@/components/serveSelect.vue'

export default {
  name: 'XhdjMaterielOrderList',
  mixins: [JeecgListMixin],
  components: {
    XhdjMaterielOrderModal,
    serveSelect,
    XhdjMaterielOrderAudit,
    XhdjMaterielOrderDetails,
    XhdjMaterielOrderExpressage
  },
  data () {
    return {
      description: '物料订单表管理页面',
      options: [
        { label: '待支付', value: '0', color: 'orange' },
        { label: '已支付', value: '1', color: 'green' },
        { label: '已取消', value: '2', color: '#999' },
        { label: '退款中', value: '3', color: 'orange' },
        { label: '已退款', value: '4', color: 'red' }
      ],
      // 表头
      columns: [
        {
          title: '技师编号',
          align: 'center',
          dataIndex: 'coachId'
        },
        {
          title: '技师昵称',
          align: 'center',
          dataIndex: 'coachName'
        },
        {
          title: '订单号',
          align: 'center',
          dataIndex: 'orderNo'
        },
        {
          title: '支付方式',
          align: 'center',
          dataIndex: 'payType',
          customRender: (text, record) => {
            switch (record.payType) {
              case 1:
                return '会员余额'
                break
              case 2:
                return '支付宝'
                break
              case 3:
                return '微信APP(商户备用)'
                break
              case 4:
                return '微信公众号(商户备用)'
                break
              case 5:
                return '微信公众号(商户备用)'
                break
              case 6:
                return '微信公众号(商户备用)'
                break
              case 7:
                return '微信公众号(商户1674799970)'
                break
            }
          }
        },
        {
          title: '订单总金额',
          align: 'center',
          dataIndex: 'totalAmount'
        },
        {
          title: '支付时间',
          align: 'center',
          dataIndex: 'payTime'
        },
        {
          title: '物料状态',
          align: 'center',
          dataIndex: 'orderStatus',
          customRender: (text, record) => {
            // return record.orderStatus===0?'待发货/待取货':record.orderStatus===1?'待收货':'已完成'
            return this.orderStatusChange(record)
          }
        },
        {
          title: '配送方式',
          align: 'center',
          dataIndex: 'getType',
          customRender: (text, record) => {
            return record.getType === 0 ? '到店自提' : '快递配送'
          }
        },
        {
          title: '支付状态',
          align: 'center',
          dataIndex: 'payStatus',
          customRender: (text, record) => {
            let a = this.options.find(res => res.value == record.payStatus)
            return a.label
          }
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          scopedSlots: { customRender: 'action' }
        }
      ],
      url: {
        list: '/material/xhdjMaterielOrder/queryMaterielBackOrderPageList',
        delete: '/xhdjMaterielOrder/xhdjMaterielOrder/delete',
        deleteBatch: '/xhdjMaterielOrder/xhdjMaterielOrder/deleteBatch',
        exportXlsUrl: 'xhdjMaterielOrder/xhdjMaterielOrder/exportXls',
        importExcelUrl: 'xhdjMaterielOrder/xhdjMaterielOrder/importExcel'
      }
    }
  },
  computed: {
    importExcelUrl: function () {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
    }
  },
  methods: {
    selectClick (value) {
      this.queryParam.agencyCode = value
      this.searchQuery()
    },
    startChange (value) {
      if (value) {
        this.queryParam.startTime = value + ' 00:00:00'
      } else {
        this.queryParam.startTime = value
      }
    },
    orderStatusChange (record) {
      if (record.orderStatus === 0 && record.getType === 0) {
        return '待取货'
      }
      if (record.orderStatus === 0 && record.getType != 0) {
        return '待发货'
      }
      if (record.orderStatus === 1) {
        return '待收货'
      }
      return '已完成'
    },
    endChange (value) {
      if (value) {
        this.queryParam.endTime = value + ' 23:59:59'
      } else {
        this.queryParam.endTime = value
      }
    },
    disabledDate (time) {
      return new Date(time).getTime() < new Date(this.queryParam.startTime).getTime()
    },
    handleAudit (record) {
      this.$refs.modalAudit.edit(record)
    },
    handleDetails (record) {
      this.$refs.modalDetails.edit(record)
    },
    handleExpressage (record) {
      this.$refs.modalExpressage.edit(record)
    }
  }
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>
